<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="utf-8">
	<title>点都德汇点楼</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="./css/shop_food_mui.css">
	<link rel="stylesheet" type="text/css" href="./libs/swiper/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	
	
</head>
<body class="home">
	<div id="loading-wrapper"><img id="loading" src="./images/loading.svg" alt=""></div>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon  mui-action-back mui-icon-left-nav"></a>
		<h1 class="mui-title">点都德汇点楼</h1>
	</header>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="javascript:;">
			<i class="mui-icon iconfont icon-trophy"></i>
			<span class="mui-tab-label">商家首页</span>
		</a>
		<a class="mui-tab-item" href="introduce.html">
			<i class="mui-icon iconfont icon-card"></i>
			<span class="mui-tab-label">商家简介</span>
		</a>
	</nav>

	<div id="profile-panel" class="mui-content">
		<div class="mui-card">
			<div class="mui-card-header mui-card-media" style="height:30vh;background-image:url(../images/banner.png)"></div>
			<div class="mui-card-content">
				<ul class="mui-card-content-inner">
					<li class="address">
						<a href="http://apis.map.qq.com/tools/routeplan/eword=点都德汇点楼&epointx=23.118030&epointy=113.331080?referer=myapp&key=EHUBZ-NU3CU-5VBVR-2LQJ6-ZINJ7-YUFLMB77"><i class="iconfont icon-mark-fill"></i>
						珠江新城花城大道86号高德汇2座4楼
						</a>
					</li>
					<li class="telephone">
						<a href="tel:13632936853"><i class="iconfont icon-telephone"></i></a>
					</li>

				</ul>
			</div>
			<ul class="mui-card-footer">
				<li class="mui-disabled"><i class="mui-icon iconfont icon-diancan"></i>点餐</li>
				<li class="mui-disabled"><i class="mui-icon iconfont icon-waimai"></i>外卖</li>
				<ul class="button-group">
					<li><a href="#"><i class="mui-icon iconfont icon-share-outerline"></i><span class="hidden">分享</span></a></li>
					<li><a href="#"><i class="mui-icon iconfont icon-heart-outerline"></i><span class="hidden">收藏</span></a></li>
					<li><a href="http://www.51creative.cn"><i class="mui-icon iconfont icon-web-outerline"></i><span class="hidden">网址</span></a></li>
					<li><a id="qr-btn" href="javascript:;"><i class="mui-icon iconfont icon-QRCode-outerline"></i><span class="hidden">关注</span></a></li>
				</ul>
				
			</ul>
		</div>

		<div id="photo-album">
			
		    <div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide" style="background-image:url(./images/VCG41169964555.jpg)"></div>
		            <div class="swiper-slide" style="background-image:url(./images/VCG21gic6354633.jpg)"></div>
		            <div class="swiper-slide" style="background-image:url(./images/VCG210f6fb855d.jpg)"></div>
		            <div class="swiper-slide" style="background-image:url(./images/VCG41119014802.jpg)"></div>
		            <div class="swiper-slide" style="background-image:url(./images/VCG41157501669.jpg)"></div>
		        </div>
		        <!-- Add Pagination -->
		        <div class="swiper-pagination"></div>
		    </div>
		    <p id="copyright">技术支持&nbsp;&nbsp;&nbsp;&nbsp;  广州酷睿体悟有限公司</p>
		</div>

		


	</div>

	<div id="mask">
		<div id="QR-code"><img src="" alt=""></div>
		<p>长按二维码，关注公众号</p>
		<p><i id="close-btn" class="mui-icon iconfont icon-close"></i></p>

	</div>
	<script type="text/javascript" src="./libs/jquery.js"></script>
	<script type="text/javascript" src="./libs/swiper/swiper.min.js"></script>
	<script type="text/javascript" src="./libs/uajsapi.js"></script>
	<script type="text/javascript" src="./libs/jquery.qrcode.min.js"></script>
	<script type="text/javascript">

	$(function(){
		//微信端隐藏header=========================================================
		{
			let UA = new UaInfo();
			if(UA.appinfo.appname === "wechat"){
				$('header').addClass('hidden');

			}
		};

		//图片滚动=================================================================
		{
			var swiper = new Swiper('.swiper-container', {
		        pagination: '.swiper-pagination',
		        effect: 'coverflow',
		        grabCursor: true,
		        centeredSlides: true,
		        slidesPerView: 'auto',
		        coverflow: {
		            rotate: 50,
		            stretch: 0,
		            depth: 100,
		            modifier: 1,
		            slideShadows : true
		        }
		    });
		};

		//生成关注二维码=============================================================
		{
			let $mask = $('#mask');
			$mask.hide();
			createQRCode("http://www.creative.cn");



			$('#qr-btn').on('click',function(){
				$mask.show();
			});
			$('#close-btn').on('click',function(){
				$mask.hide();
			});

			

			function createQRCode(txt){
				$QR = $("#QR-code");
				$QR.qrcode({ 
				    render: "canvas", 
				    width: 180, 
				    height:180, 
				    text:  txt 
				});

				let canvas = $QR.find('canvas').get(0);
				$("#QR-code").find('img').attr('src',canvas.toDataURL("image/png")); 
			}
		};

		//页面下载完成后，隐藏loading
		$(window).on('load',function(){
			$('#loading-wrapper').hide();
		})

		//map key EHUBZ-NU3CU-5VBVR-2LQJ6-ZINJ7-YUFLM
		


	});
	</script>
</body>
</html>